<template>
  <div class="header-bar">
    <main class="page-history">
      <nut-cell class="van-hairline--bottom">
        <template v-slot:title>
        <span>{{state.selectName}}</span>
        </template>
        
        <template v-slot:link>
          <nut-menu class="farmland-select" title-icon="triangle-down">
            <nut-menu-item
              :title="'切换'"
              active-title-class="nut-menu-item-active"
              v-model="state.value"
              @change="handleChange"
              :options="state.optionsList">
            </nut-menu-item>
          </nut-menu>
        </template>
      </nut-cell>
    </main>
  </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { ref, onMounted, reactive, toRefs, watch } from 'vue'
import { canopiesListData } from '@/services/apis/canopies'
interface Props {
  value: string
}

const props = withDefaults(defineProps<Props>(), {
  value: ''
})

const emit = defineEmits(['caonpyChange'])

const state = reactive({
  optionsList: [],
  value: props.value,
  selectName: ''
})
watch(
  () => props.value,
  (value, prevvalue) => {
    state.value = value
  }
)
canopiesListData({ pageNo: 1, pageSize: 999, canopyName: '', officeCode: '' }).then(data => {
  state.optionsList = []
  if ((data.result = 'true' && data.data.list.length > 0)) {
    var list = data.data.list

    list.forEach(item => {
      state.optionsList.push({
        text: item.canopyName,
        value: item.id
      })
    })
    if (!props.value) {
      state.value = list[0]?.id
      emit('caonpyChange', list[0]?.id)
    }
	getName(state.value)
  }
})
const getName =(val) =>{
  const obj = state.optionsList.find(item=>{
    if(item.value == val){
        return item
    }
   })
   state.selectName = obj?.text
}
const handleChange = (val) => {
  getName(val)
  emit('caonpyChange', val)
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
$border-radius: 4px;
.page-history {
  .nut-cell {
    margin: 0;
    padding: 13px 10px;
    box-shadow: none;
    border-radius: 0;
  }
  .nut-cell__icon {
    position: relative;
    margin-right: 5px;
    border-radius: $border-radius;
    overflow: hidden;
  }
  .nut-cell__link {
    font-size: $font-size-0;
  }

  .nut-icon__img {
    width: 40px;
    height: 40px;
  }
  .nut-cell__value {
    font-size: $font-size-1;
  }
  .farmland-select {
        .nut-menu__bar {
            padding:1px 2px;
            box-shadow: none;
            line-height: 15px;
            border: 0.5px solid #499D2F;
            border-radius: 2px;
            color: #499D2F;
            .nut-menu__title-icon {
                float: right;
                font-size: 12px;
            }
        }
        &.nut-menu .nut-menu__bar .nut-menu__item{
            font-weight: 400;
            color: #499D2F;
            .nut-menu__title {
                .nut-menu__title-text{
                     padding: 0 3px 0 4px;
                     font-size: 12px;
                 }
            }
        }
    }
    .history-list {
        padding: 0 10px;
    }
    .nut-menu-item__content{
        .nut-menu-item__option{
            justify-content: center;
            .nut-icon-Check{
                display: none;
            }
        }
    }
}
</style>
